<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="分享" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="coreshop-flex coreshop-justify-center coreshop-padding-10">
			<image :src="path" mode="widthFix" style="width: 100%;"></image>

			<l-painter ref="painter" custom-style="position: fixed; left: 200%"
				css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
				<l-painter-image :src="userInfo.avatarImage"
					css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
				<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
					<l-painter-text :text="userInfo.nickName"
						css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
					<l-painter-text :text="showModel.describe" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
				</l-painter-view>
				<l-painter-view
					css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image :src="showModel.image"
						css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
					<l-painter-view
						css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
						v-if="showPrice">
						<l-painter-text text="￥" css="vertical-align: bottom" />
						<l-painter-text :text="showModel.price" css="vertical-align: bottom; font-size: 58rpx" />
						<l-painter-text text="元" css="vertical-align: bottom" />
						<l-painter-text v-if="showModel.mktprice>0" :text="'￥'+ showModel.mktprice"
							css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
					</l-painter-view>
					<l-painter-view
						css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
						v-if="showStore">
						<l-painter-text :text="showModel.storeDesc" css="vertical-align: bottom; font-size: 48rpx" />
					</l-painter-view>
					<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400" v-if="showPinTuanArguments">
						<l-painter-text :text="'截止：'+showModel.pinTuan.endTime" css="color: #212121; background: #ffb400;" />
						<l-painter-text :text="showModel.pinTuan.peopleNumber+'人团'"
							css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;" />
						<!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
					</l-painter-view>
					<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400"
						v-if="showGroupPurchaseSeckillArguments">
						<l-painter-text :text="'截止：'+showModel.groupPurchaseSeckill.endTime"
							css="color: #212121; background: #ffb400;" />
						<!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
					</l-painter-view>
					<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
						<l-painter-text :text="showModel.brief" css="margin-left: 16rpx; background: #fff4d9" />
					</l-painter-view>
					<l-painter-view css="margin-top: 30rpx">
						<l-painter-text
							css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
							:text="showModel.name"></l-painter-text>
						<l-painter-image :src="poster" css="width: 128rpx; height: 128rpx;" />
						<!--<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>-->
					</l-painter-view>
				</l-painter-view>
			</l-painter>

		</view>

		<view
			class="share-bot flex flex-direction coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row coreshop-justify-between">
			<!-- <view>
				<u-button shape="square" type="primary" @click="savePoster()">
					<u-icon name="download" :margin-right="20" label="保存到本地" color="#fff" labelColor="#fff"></u-icon>
				</u-button>
			</view> -->
			<!-- <view>
				<u-button shape="square" type="primary" @click="goBack()">
					<u-icon name="arrow-leftward" :margin-right="20" label="返回上一页" color="#fff" labelColor="#fff"></u-icon>
				</u-button>
			</view> -->
		</view>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>
<script>
	var _this;
	export default {
		data() {
			return {
				poster: '',
				path: '',
				userInfo: {},
				priceSection: '',
				showModel: {
					describe: '为您挑选了一个好物',
					price: 0.00,
					mktprice: 0.00,
					brief: '',
					image: '',
					name: '',
					pinTuan: {
						endTime: '',
						peopleNumber: 0,
					},
					groupPurchaseSeckill: {
						endTime: '',
					},
					storeDesc: ''
				},
				showPinTuanArguments: false,
				showGroupPurchaseSeckillArguments: false,
				showPrice: true,
				showStore: true
			};
		},
		onLoad(options) {
			console.log("接收传输数据：", options);
			_this = this;
			_this.poster = decodeURIComponent(options.posterUrl);
			_this.userInfo = this.$store.state.userInfo;
			uni.showLoading({
				title: '加载中'
			});
			if (options.shareType == _this.$globalConstVars.shareType.goods) {
				let data = {
					id: parseInt(options.goodsId)
				}
				_this.$u.api.goodsDetail(data).then(res => {
					if (res.status == true) {
						console.log(res.data);
						_this.showModel.image = res.data.image;
						_this.showModel.brief = res.data.brief;
						_this.showModel.name = res.data.name;
						_this.showModel.price = res.data.product.price;
						_this.showModel.mktprice = res.data.product.mktprice;

						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			} else if (options.shareType == _this.$globalConstVars.shareType.pinTuan || options.shareType == _this
				.$globalConstVars.shareType.addPinTuan) {
				let data = {
					id: parseInt(options.groupId),
					data: false,
				}
				_this.$u.api.pinTuanGoodsInfo(data).then(res => {
					if (res.status == true) {
						console.log(res.data);
						_this.showModel.describe = "为您推荐了一个拼团活动";
						_this.showModel.image = res.data.image;
						_this.showModel.brief = res.data.name;
						_this.showModel.name = res.data.pinTuanRule.name;
						_this.showModel.price = res.data.pinTuanPrice;
						_this.showModel.mktprice = res.data.mktprice;

						_this.showPinTuanArguments = true;
						_this.showModel.pinTuan.endTime = res.data.pinTuanRule.endTime;
						_this.showModel.pinTuan.peopleNumber = res.data.pinTuanRule.peopleNumber;

						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			} else if (options.shareType == _this.$globalConstVars.shareType.serviceGoods) {
				let data = {
					id: parseInt(options.serviceGoodsId),
					data: false,
				}
				_this.$u.api.getServiceDetail(data).then(res => {
					if (res.status == true) {
						console.log(res.data);
						_this.showModel.describe = "为您推荐了一个服务商品";
						_this.showModel.image = res.data.thumbnail;
						_this.showModel.brief = res.data.description;
						_this.showModel.name = res.data.title;
						_this.showModel.price = res.data.money;
						_this.showModel.mktprice = res.data.mktprice;

						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})

			} else if (options.shareType == _this.$globalConstVars.shareType.seckill) {
				let data = {
					id: parseInt(options.groupId),
					type: _this.$globalConstVars.shareType.seckill,
					needSku: true
				}
				let userToken = this.$db.get('userToken');
				if (userToken) {
					data.token = userToken
				}
				_this.$u.api.groupInfo(data).then(res => {
					if (res.status == true) {
						console.log(res.data);
						_this.showModel.describe = "为您推荐了一个秒杀";
						_this.showModel.image = res.data.image;
						_this.showModel.brief = res.data.brief;
						_this.showModel.name = res.data.name;
						_this.showModel.price = res.data.price;
						_this.showModel.mktprice = res.data.mktprice;

						_this.showGroupPurchaseSeckillArguments = true;
						_this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;

						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			} else if (options.shareType == _this.$globalConstVars.shareType.group) {
				let data = {
					id: parseInt(options.groupId),
					type: _this.$globalConstVars.shareType.seckill,
					needSku: true
				}
				let userToken = this.$db.get('userToken');
				if (userToken) {
					data.token = userToken
				}
				_this.$u.api.groupInfo(data).then(res => {
					if (res.status == true) {
						console.log(res.data);
						_this.showModel.describe = "为您推荐了一个团购";
						_this.showModel.image = res.data.image;
						_this.showModel.brief = res.data.brief;
						_this.showModel.name = res.data.name;
						_this.showModel.price = res.data.price;
						_this.showModel.mktprice = res.data.mktprice;

						_this.showGroupPurchaseSeckillArguments = true;
						_this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;

						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			} else if (options.shareType == _this.$globalConstVars.shareType.inv) {
				_this.$u.api.getDistributionStoreInfo({
					id: options.store
				}).then(res => {
					if (res.status) {
						_this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
						_this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
						_this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
						_this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';

						_this.showPrice = false;
						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);
					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				});
			} else if (options.shareType == _this.$globalConstVars.shareType.agent) {
				_this.$u.api.getAgentInfo({
					id: options.store
				}).then(res => {
					if (res.status) {
						_this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
						_this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
						_this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
						_this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';

						_this.showPrice = false;
						setTimeout(function() {
							_this.canvasToTempFilePath();
							uni.hideLoading();
						}, 1000);
					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				});
			}
		},
		computed: {},
		methods: {
			canvasToTempFilePath() {
				var _this = this;
				// 渲染
				this.$refs.painter.render();
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					success: (res) => {
						_this.path = res.tempFilePath;
					},
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 保存海报到本地
			savePoster() {
				let _this = this;
				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				_this.downloadImageOfMp(_this.path)
				// #endif
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downloadImageOfMp(image) {
				let _this = this

				// #ifdef APP-PLUS || APP-PLUS-NVUE
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								_this.$refs.uToast.show({
									message: '操作成功',
									type: 'success'
								})
							},
							fail() {
								_this.$u.toast('图片保存失败')
							}
						});
					},
					fail() {
						_this.$u.toast('下载失败')
					}
				})
				// #endif

				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						console.log(image);
						uni.saveImageToPhotosAlbum({
							filePath: image,
							success() {
								_this.$refs.uToast.show({
									message: '保存成功',
									type: 'success'
								})
							},
							fail() {
								_this.$u.toast('图片保存失败')
							}
						});
					},
					fail() {
						console.log('scope.writePhotosAlbum授权失败')
					}
				})
				// #endif
			}
		}
	};
</script>
<style scoped lang="scss">
	@import "shareNewPoster.scss";
</style>